iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
1
Modern Web

Angular初期筆記系列 第 21

DAY21-Angular6之pipe

  • 分享至 

  • xImage
  •  

基本說明

pipe 基本上就是值的轉換

下圖是在官網查詢 pipe 的所有項目https://angular.io/api?type=pipe
https://ithelp.ithome.com.tw/upload/images/20181031/20107754YvyCgsxQMA.png

 
 

CurrencyPipe (貨幣)

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
currencyCode:
官方 ISO 4217 貨幣名稱的主要代碼:https://en.wikipedia.org/wiki/ISO_4217

display(中文:顯示狀態):
五種方式

  • 'code' :顯示主要代碼
  • 'symbol' :顯示符號 $ (預設)
  • 'symbol-narrow' :有兩種貨幣符號的要使用這種,才會顯示簡化符號
  • string :使用字串代表顯示
  • boolean:Angular 第五版 棄用

locale:
各國代碼:https://zh.wikipedia.org/wiki/%E5%8C%BA%E5%9F%9F%E8%AE%BE%E7%BD%AE

component.ts
-----
b: number = 1.3495;
component.html
-----
<p>TWD-symbol: {{b | currency:'TWD':'symbol':'4.2-2'}}</p>
<p>TWD-symbol-narrow: {{b | currency:'TWD':'symbol-narrow':'4.2-2'}}</p>
<p>EUR-symbol: {{b | currency:'EUR':'symbol':'4.2-2'}}</p>
<p>EUR-symbol-narrow: {{b | currency:'EUR':'symbol-narrow':'4.2-2'}}</p>
<p>CNY-symbol: {{b | currency:'CNY':'symbol':'4.2-2'}}</p>
<p>CNY-symbol-narrow: {{b | currency:'CNY':'symbol-narrow':'4.2-2'}}</p>

顯示
https://ithelp.ithome.com.tw/upload/images/20181031/20107754qL7fAk9ELp.png

 
 

DatePipe (日期)

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

component.ts
-----
today: number = Date.now();
component.html
-----
{{today | date:'yyyy年MM月dd日HH點mm分ss秒'}}

顯示
https://ithelp.ithome.com.tw/upload/images/20181031/20107754p09T6uGRbH.png

 
 

DecimalPipe (數字)

{{ value_expression | number [ : digitsInfo [ : locale ] ] }}

component.ts
-----
b: number = 1.3456789;
component.html
-----
{{b | number:'4.1-5'}}

4:正整數字數長度 4
1-5:小數點後最小字數長度 1,最大字數長度 5

顯示
https://ithelp.ithome.com.tw/upload/images/20181031/20107754p4orj3Dx77.png

 
 

JsonPipe (Object 轉為 Json)

{{ value_expression | json }}

component.ts
-----
myStyle = { 'color': 'yellow', 'background-color': 'red' };
component.html
-----
<p>{{myStyle|json}}</p>

顯示
https://ithelp.ithome.com.tw/upload/images/20181031/20107754lIB5Vj97W1.png

 
 

參考來源

1
CurrencyPipe
2
DatePipe
3
DecimalPipe
4
JsonPipe


上一篇
DAY20-Angular6之實現子上父
下一篇
DAY22-Angular6之路由-簡單實作
系列文
Angular初期筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言